import React from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Grid, Typography } from '@material-ui/core';
import { Image } from 'components/atoms';
import Swiper from 'swiper';
import { Icon } from 'components/atoms';
import { useSelector } from 'react-redux';

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
        height: "100%",
        backgroundColor: "#272727",
        padding: "80px 0",
        overflow: 'hidden',
        [theme.breakpoints.up('md')]: {
            padding: "2% 0",
        },
        "& .swiper-container2": {
            padding: "0 30px",
            [theme.breakpoints.up('md')]: {
                paddingLeft: "100px",
            },
        }
    },
    swiperSlide: {
        width: 'auto',
        padding: "20px 0 0",
        height: "600px",
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        [theme.breakpoints.up('md')]: {
            height: "400px",
        },
    },
    swiperImageSlide: {
        width: "100%",
        height: "400px",
        [theme.breakpoints.up('md')]: {
            height: "300px",
        },
    },
    image: {
        objectFit: 'cover',
    },
    typography: {
        textAlign: "left",
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "20px",
        fontStyle: "normal",
        fontWeight: 700,
        lineHeight: "normal",
        textTransform: "uppercase",
        color: "#fff",
        [theme.breakpoints.up('md')]: {
            fontSize: "24px",
        },
    },
    typography1: {
        paddingLeft: "40px",
        margin: "30px 0",
        [theme.breakpoints.up('md')]: {
            margin: "50px 0",
        },
    },
    typography2: {
        lineHeight: "20px",
        fontSize: "12px",
        color: "#BDBDBD",
        width: "90%",
        paddingLeft: "40px",
    },
    typography3: {
        color: "#fff",
        fontSize: "20px",
        lineHeight: "24px",
        margin: "10px 0"
    },
    typography4: {
        color: "#fff",
        fontSize: "12px",
        lineHeight: "16px",
    },
    typography5: {
        color: "#7E53F9",
        lineHeight: "16px",
    },
    typography6: {
        color: "#7E53F9",
        lineHeight: "16px",
    },
    titleText: {
        fontSize: "30px",
        color: "#fff",
        padding: "0",
        textAlign: "center",
        [theme.breakpoints.up('md')]: {
            fontSize: "24px",
            padding: "30px 0",
        },
    },
    gridItem: {
        padding: "8% 0",
        borderTop: "1px solid rgba(255,255,255,0.2)",
    },
    platform: {
        display: "flex",
        [theme.breakpoints.up('md')]: {
            display: "none"
        },
    },
    icon: {
        verticalAlign: "middle",
        border: "1px solid #fff",
        borderRadius: "50%",
        width: "40px",
        height: "40px",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        [theme.breakpoints.up('md')]: {
            fontSize: "24px",
            padding: "30px 0",
        },
    },
}));

const images = [{
    src: 'https://assets.maccarianagency.com/the-front/photos/coworking/place3.jpg',
    alt: '',
}, {
    src: 'https://assets.maccarianagency.com/the-front/photos/coworking/place1.jpg',
    alt: '',
}, {
    src: 'https://assets.maccarianagency.com/the-front/photos/coworking/place2.jpg',
    alt: '',
}, {
    src: 'https://www.navahang.com/images/2023/09/600x338/Evan-Band-Faramooshkar-Live-video.jpg',
    alt: '',
}, {
    src: 'https://www.navahang.com/images/2023/09/600x338/Masoud-Sadeghloo-Akhare-Shab-Live-video.jpg',
    alt: '',
}, {
    src: 'https://www.navahang.com/images/2023/08/600x338/Azel-Soroode-Fareh-Iran-video.jpg',
    alt: '',
}, {
    src: 'https://www.navahang.com/images/2023/08/600x338/Amir-Zehi-O-Sole-Mio-video.jpg',
    alt: '',
}, {
    src: '	https://www.navahang.com/images/2023/08/600x338/Roozbeh-Bemani-Bad-Az-Raftan-video.jpg',
    alt: '',
}, {
    src: 'https://www.navahang.com/images/2023/08/600x338/Saaro-Atel-o-Batel-video.jpg',
    alt: '',
}, {
    src: 'https://assets.maccarianagency.com/the-front/photos/coworking/place1.jpg',
    alt: '',
},

]

const OurTeam = () => {
    const classes = useStyles();

    const OurTeamData = useSelector((state) => state.cover.discovers?.teams);

    React.useEffect(() => {
        new Swiper('.swiper-container2', {
            spaceBetween: 0,
            // loop: true,
            // autoplay: {
            //     delay: 5000,
            //     disableOnInteraction: true,
            // },
            breakpoints: {
                0: {
                    slidesPerView: 1,
                    spaceBetween: 50,
                },
                990: {
                    slidesPerView: 2.2,
                }
            }
        });
    });
    return (
        <div className={classes.root}>
            <div className={clsx(classes.typography, classes.titleText)}>
                Our Team
            </div>
            <div
                className={clsx(
                    'swiper-container2',
                    'swiper-image',
                )}
            >
                <div className="swiper-image__wrapper, swiper-wrapper">
                    {OurTeamData && OurTeamData.map((item, index) => (
                        <div
                            className={clsx(
                                'swiper-image__slide',
                                'swiper-slide',
                                classes.swiperSlide,
                            )}
                            key={index}
                        >
                            <Grid container>
                                <Grid item xs={12} md={6}>
                                    <div className={classes.swiperImageSlide}>
                                        <Image
                                            src={item.image}
                                            alt={item.image}
                                            srcSet={item.image}
                                            lazyProps={{ width: '100%', height: '100%' }}
                                            className={clsx(
                                                'swiper-image__item',
                                                classes.image,
                                            )}
                                        />
                                    </div>
                                </Grid>
                                <Grid item xs={12} md={6} container justifyContent='flex-start' direction="column">
                                    <Typography className={clsx(classes.typography, classes.typography1)}>
                                        {item.name}
                                    </Typography>

                                    <Typography className={clsx(classes.typography, classes.typography2)}>
                                        {item.comment}
                                    </Typography>
                                </Grid>
                            </Grid>
                        </div>
                    ))}
                </div>

                <Grid container justifyContent='center' alignItems='center' className={classes.platform}>
                    <Grid item container justifyContent='center' alignItems='center' xs={2} sm={1}>
                        <div className={clsx(classes.icon)}>
                            <Icon
                                fontIconClass="fab fa-facebook-f"
                                fontIconColor={"#fff"}
                            />
                        </div>
                    </Grid>

                    <Grid item container justifyContent='center' alignItems='center' xs={2} sm={1}>
                        <div className={clsx(classes.icon)}>
                            <Icon
                                fontIconClass="fab fa-twitter"
                                fontIconColor={"#fff"}
                            />
                        </div>
                    </Grid>

                    <Grid item container justifyContent='center' alignItems='center' xs={2} sm={1}>
                        <div className={clsx(classes.icon)}>
                            <Icon
                                fontIconClass="fab fa-youtube"
                                fontIconColor={"#fff"}
                            />
                        </div>
                    </Grid>

                    <Grid item container justifyContent='center' alignItems='center' xs={2} sm={1}>
                        <div className={clsx(classes.icon)}>
                            <Icon
                                fontIconClass="fab fa-spotify"
                                fontIconColor={"#fff"}
                            />
                        </div>
                    </Grid>

                </Grid>
            </div>
        </div>
    )
}


OurTeam.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};


export default OurTeam
